/*
 * @Author: YuanSong
 * @Date: 2021-12-13 21:45:48
 * @Last Modified by: YuanSong
 * @Last Modified time: 2022-01-18 22:39:09
 */

import React from "react";
import NormalPage from "@components/NormalPage";
import { withRouter, RouteComponentProps } from "react-router-dom";
import Searchbar from "@components/Searchbar";
import { connect } from "react-redux";
import { AppState } from "@redux/reducers";
import { IGlobalReduceState } from "@/redux/reducers/global";
import { requestMovieInfo } from "@redux/actions/movie";
import { bindActionCreators } from "redux";

type IProps = IGlobalReduceState & RouteComponentProps & {
  requestMovieInfo:typeof requestMovieInfo;
};
type RList = Array<{
    id:number,
    movieTitle:string,
    movieCover:string,
    /** 资源目录 */
    movieDirectory:string;
}>
class MovieGallery extends React.Component<IProps> {
  constructor(props: any) {
    super(props);
  }
  readonly state ={
    queryData:{
      from:0,
      size:10,
    },
    responseData:{
      list:[{
        id:0,
        movieTitle:'',
        movieCover:'',
        /** 资源目录 */
        movieDirectory:"2022-01-19",
      }],
      total:0,
    }
    
  }
  
  componentDidMount(){
    let that = this;
    this.props.requestMovieInfo(this.state.queryData,function(data){
      that.setState({
        responseData:{
          list:data.list,
          total:data.total,
        }
      })
    })
  }
  private toPath(id:number) {
    this.props.history.push({ pathname: `videoRoom/${id}` });
  }
  onSearch(searchStr: string) {
    console.log("MovieGallery get the search string:", searchStr);
  }
  render() {
    // {
    //   movieTitle: "电影一",
    //   movieId: "1",
    //   movieCover:"http://127.0.0.1:3000/bioscope/2022-01-19/月刊少女野崎君_cover.jpeg",
    // },
    let timTempate;
    if (this.state.responseData.list){
      timTempate = this.state.responseData.list.map((item, index) => (
        <div className="MovieGallery-Wrapper" onClick={()=>this.toPath(item.id)}>
          <div className="BackImg-box">
            {/* production <-----> dev */}
            {/* <img src={`http://127.0.0.1:9991/bioscope/${item.movieDirectory}/${item.movieCover}`} style={{width:'200px',height:'284.88px'}}/> */}
            <img src={`http://47.98.233.31:9991/bioscope/${item.movieDirectory}/${item.movieCover}`} style={{width:'200px',height:'284.88px'}}/>
            {/* <span className="Span-box left">创建房间</span>
                <span className="Span-box right">加入房间</span> */}
          </div>
        </div>
      ));
    }
    
    return (
      <NormalPage showHeader={true} showRightNavigation={true}>
        <div className="MovieGallery-Parent-Wrapper">
          <Searchbar onSearch={this.onSearch.bind(this)} />
          {timTempate}
        </div>
      </NormalPage>
    );
  }
}
export default connect(
  (state: AppState) => state.global,
  (dispatch) =>
    bindActionCreators(
      {
        requestMovieInfo,
      },
      dispatch
    )
)(MovieGallery);
